<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/jquery.3.6.0.js"></script>
</head>
<body>
    <div class="left">
        <input type="text">
        <button>查询</button>
        <h1></h1>
        <h2></h2>
    </div>
    <div class="right">
        <input type="text" class="cname">
        <input type="text" class="skin_name">
        <button>添加</button>
    </div>
    <script>
        $(function(){
            $('.left button').click(function(){
                const heroName=$(".left input").val()
                $.get("http://127.0.0.1:3001/getHeroSkin",{heroName},function(res){
                    $('.left h1').text(res.data.cname)
                    $('.left h2').text(res.data.skin_name)
                })
            })
            $(".right button").click(function(){
                const cname=$(".cname").val()
                const skin_name=$(".skin_name").val()
                $.post("http://127.0.0.1:3001/addHeroSkin",{
                    cname,skin_name
                },function(res){
                    console.log(res);
                })
            })
        })
    </script>
</body>
</html>